<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css">
	<style>
		body{
			padding: 0;margin:0;
			color: #333;
			font-size: 14px;
		}
		i{color: #999;font-style: normal;}
		button{
			padding:0 25px;
			height: 36px;
			line-height: 1px;
			color: #fff;
			border: none;
			margin-left: 10px;
			cursor: pointer;
			outline: none;
			box-shadow: none;
		}
	.radio input {
        display: none;/*取消默认样式*/
    }   
    .radio input+label {    /*紧接input出现的label，要有相同父元素*/
        display: inline-block;
        position: relative;
        border-radius: 50%;
        border: 4px #D2D2D2 solid;
        width: 14px;   /*外圈圆高度、宽度*/
        height: 14px; 
        vertical-align:middle;
        margin:6px 30px 10px 5px;
        cursor: pointer;
    }
    .radio input+label::after {  /*伪元素制作内部的圆*/
        content: "";
        border-radius: 50%;
        position: absolute;/*居中方法*/
        width: 0px; /*中心圆的宽度、高度*/
        height: 0px;
    }

    .radio input:checked+label {
        background-color: #fff;/*选中后外圈圆颜色*/
        border-color: #22ABD2;   
    }  

    select::-ms-expand { display: none; }/*IE,将默认的select选择框样式清除*/
    select {
    	width: 60%;
    	position: relative;
        /*将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url("") no-repeat scroll right  center transparent;
            background-size: 18px 26px;
    }
		span{display: inline-block;position: relative;}
		.center{
			margin:20px;
			border-radius: 5px;
			background: #fff;
			height: calc(100% - 40px);
		}
		.row{
			margin:0 20px;
		}
		.row>div{height:60px;}
		.rowB>div{height:100px;}
		.bottomA{border-bottom:1px solid #DCDCDC;}
		.bottomB{border-bottom:1px dashed #DCDCDC;}
		.bottomC{border-bottom:2px dashed #DCDCDC;}
		.right{border-right: 1px dashed #DCDCDC;}
		.box{
			display: -webkit-flex;
			display:flex;
  			align-items:center;
  			justify-content: center;
		}
		.box_r{justify-content: flex-end;}
		.box_l{justify-content: flex-start;}
		.img>div,.addImg{width: 90px;height: 90px;position: relative;}
		.addImg{background: #eee;margin-left: 25px;margin-right: 5px;}
		.addImg:hover{cursor: pointer;background: #ccc;}
		.addImg p{position: absolute;bottom: 5px;color: #888;font-size: 12px;text-align: center;width: 100%;margin:0;padding: 0;}
		.img .madd{line-height: 70px;width: 100%;text-align: center;display: inline-block;font-size: 56px;}
		.img .mclose{position: absolute;width: 20px;height: 20px;right: -9px;top: -5px;color: #fff;text-align: center;line-height: 20px;background: #FF5E44;border-radius: 50%;font-size: 12px;font-weight: bold;cursor: pointer;}
		.img img{width: 90px;height: 90px;}
		input[type=text].input{
			background: #eee;border: none;
		}
	</style>
</head>
<body>
	<div id='triangle'></div>
	<div class="center">
		<div class="row bottomA">
	      <div class="col-lg-2 box box_l">登记号：<i>2135469870</i></div>
	      <div class="col-lg-2 box">姓名：<i>张三</i></div>
	      <div class="col-lg-4 box">性别：<i>男</i></div>
	      <div class="col-lg-2 box">年龄：<i>58</i></div>
	      <div class="col-lg-2 box box_r">类型：<i>复诊</i></div>  
	   	</div>
	   	<div class="row bottomA">
	   		<div class="col-lg-8 box box_l">患者基本信息</div>
	   		<div class="col-lg-4 box box_r" style="color: #0AA3A9;">收录医师：<i>李四</i></div>
	   	</div>
	   	<div class="row rowB bottomC">
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">姓名</i><input type="text" class="input col-lg-9" disabled ></div>
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">生日</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 box box_l"><i class="col-lg-3">年龄</i><input type="text" class="input col-lg-9"></div>
	   	</div>
	   	<div class="row rowB bottomB">
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">就医卡号</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">身份证号</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 box box_l"><i class="col-lg-3">微信号</i><input type="text" class="input col-lg-9"></div>
	   	</div>
	   	<div class="row rowB bottomB">
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">职业选项</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">电话</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 box box_l"><i class="col-lg-3">邮箱</i><input type="text" class="input col-lg-9"></div>
	   	</div>
	   	<div class="row rowB">
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">地址</i><input type="text" class="input col-lg-9"></div>
	   		<div class="col-lg-4 right box box_l"><i class="col-lg-3">图片</i><div class="img col-lg-9">
					<div class="addImg" id='img1'>
						<i class="madd">+</i>
						<p>点击添加图片</p>
					</div>
				</div></div>
				<input type="file" id='file1' style="width: 0;height: 0;display: none;" disabled>
	   		<div class="col-lg-4 box box_l"><i class="col-lg-3">研究知情确认</i>
	   			<div class="text-left radio col-lg-9">
		   				<span>确认<input type="radio" checked name='YoN' id='Y'>
		   				<label for="Y"></label></span>
		   				<span>为确认<input type="radio" name='YoN' id='N' disabled>
		   				<label for="N"></label></span>
		   			</div></div>
	   	</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

	<script>

		$('body').height($(window).height());
		var img1 = false;
		var img2 = false;
		$('.img').on('click','.addImg',function(e){
			if($(this)[0].id == 'img1') {
				if(!img1) return;
				$('#file1').click();
			}
			if($(this)[0].id == 'img2'){
				if(!img2) return;
				$('#file2').click();
			}
			stopBubble(e);
		})
		$('.img').on('click','.mclose',function(e){
			stopBubble(e);
			if($(this).parent()[0].id == 'img1'){
				img1 =true;
				$('#file1')[0].value = '';
			}
			if($(this).parent()[0].id == 'img2'){
				img2 =true;
				$('#file2')[0].value = '';
			}
			$(this).parent().html('<i class="madd">+</i><p>点击添加图片</p>');
		})
		var typeImg = ['bmp','jpeg','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp'];
		$('#file1').change(function(){
			var split = this.files[0].type.split('/');
			var pd = false;
			for(var i=0;i<typeImg.length;i++){
				if(split[split.length - 1].toLowerCase() == typeImg[i]){
					pd = true;
					break;
				}
			}
			if(!pd) {
				alert('请选择正确的文件');
				return;
			}
			var val = getObjectURL(this.files[0]);
			var html = '<i class="mclose">一</i><img src="'+val+'">';
			img1 = false;
			$('#img1').html(html);
		});
		$('#file2').change(function(){
			var split = this.files[0].name.split('.');
			var pd = false;
			for(var i=0;i<typeImg.length;i++){
				if(split[split.length - 1].toLowerCase() == typeImg[i]){
					pd = true;
					break;
				}
			}
			if(!pd) {
				alert('请选择正确的文件');
				return;
			}
			var val = getObjectURL(this.files[0]);
			var html = '<i class="mclose">一</i><img src="'+val+'">';
			img2 = false;
			$('#img2').html(html);
		});
		function getObjectURL(file) {
		    var url = null;
		    if (window.createObjectURL != undefined) { // basic
		      url = window.createObjectURL(file);
		    } else if (window.URL != undefined) { // mozilla(firefox)
		      url = window.URL.createObjectURL(file);
		    } else if (window.webkitURL != undefined) { // webkit or chrome
		      url = window.webkitURL.createObjectURL(file);
		    }
		    return url;
		 }
		function stopBubble(e){
		  //一般用在鼠标或键盘事件上
		  if(e && e.stopPropagation){
		  //W3C取消冒泡事件
		  e.stopPropagation();
		  }else{
		  //IE取消冒泡事件
		  window.event.cancelBubble = true;
		  }
		};
	</script>
</body>
</html>